<template>
  <div>
    <vxe-grid ref="xGrid" v-bind="gridOptions" @menu-click="handleMenuClick"></vxe-grid>
  </div>
</template>

<script>
export default {
    data() {
        const gridOptions = {
            border: true,
            showOverflow: true,
            showFooter: true,
            keepSource: true,
            mouseConfig: {
                selected: true
            },
            editConfig: {
                trigger: 'dblclick',
                mode: 'cell',
                showStatus: true
            },
            columns: [
                { field: 'checkbox', type: 'checkbox', width: 50 },
                { type: 'seq', width: 70 },
                { field: 'name', title: 'Name', editRender: { name: 'input' } },
                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
                { field: 'age', title: 'Age', editRender: { name: 'input' } },
                { field: 'role', title: 'Role', sortable: true, editRender: { name: 'input' } },
                { field: 'address', title: 'Address', sortable: true, editRender: { name: 'input' } }
            ],
            data: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
            ],
            menuConfig: {
                header: {
                    options: [
                        [
                            { code: 'COPY_TITLE', name: '复制列标题' },
                            { code: 'HIDDEN_COLUMN', name: '隐藏列' },
                            { code: 'CLEAR_SORT', name: '清除排序' },
                            { code: 'RESET_COLUMN', name: '重置个性化列' }
                        ],
                        [
                          {
                            name: '列操作',
                            children: [
                              { code: 'INSERT_COL_LEFT',  name: '在左侧插入列' },
                              { code: 'INSERT_COL_RIGHT', name: '在右侧插入列' },
                              { code: 'DELETE_THIS_COLUMN', name: '删除当前列' }
                            ]
                          }
                        ]
                    ]
                },
                body: {
                    options: [
                        [
                            { code: 'CLEAR_CELL', name: '清除值' },
                            { code: 'REVERT_CELL', name: '还原值' }
                        ],
                        [
                            {
                                name: '插入单行数据',
                                children: [
                                    { code: 'INSERT_AT_ROW', name: '插入单行' },
                                    { code: 'INSERT_NEXT_AT_ROW', name: '插入单行 next' },
                                    { code: 'INSERT_AT_EDIT_ROW', name: '插入单行并编辑' },
                                    { code: 'INSERT_NEXT_AT_EDIT_ROW', name: '插入单行 next 并编辑' }
                                ]
                            },
                            {
                                name: '插入多行数据',
                                children: [
                                    { code: 'BATCH_INSERT_AT_ROW', name: '插入多行' },
                                    { code: 'BATCH_INSERT_NEXT_AT_ROW', name: '插入多行 next' },
                                    { code: 'BATCH_INSERT_AT_EDIT_ROW', name: '插入多行并编辑' },
                                    { code: 'BATCH_INSERT_NEXT_AT_EDIT_ROW', name: '插入多行 next 并编辑 ' }
                                ]
                            }
                        ],
                        [
                          {
                            name: '列操作',
                            children: [
                              { code: 'INSERT_COL_LEFT',  name: '在左侧插入列' },
                              { code: 'INSERT_COL_RIGHT', name: '在右侧插入列' },
                              { code: 'DELETE_THIS_COLUMN', name: '删除当前列' }
                            ]
                          }
                        ],
                        [
                            {
                                name: '删除数据',
                                children: [
                                    { code: 'DELETE_ROW', name: '删除行' },
                                    { code: 'DELETE_CHECKBOX_ROW', name: '删除复选框勾选行' }
                                ]
                            }
                        ],
                        [
                            {
                                name: '排序',
                                children: [
                                    { code: 'SORT_ASC', name: '升序' },
                                    { code: 'SORT_DESC', name: '倒序' },
                                    { code: 'CLEAR_SORT', name: '清除当前列排序' },
                                    { code: 'CLEAR_ALL_SORT', name: '清除所有列排序' }
                                ]
                            }
                        ],
                        [
                            {
                                name: '打印',
                                prefixConfig: {
                                    icon: 'vxe-icon-print'
                                },
                                children: [
                                    { code: 'PRINT_CHECKBOX_ROW', name: '打印选中' },
                                    { code: 'PRINT_ALL', name: '打印全部', suffixConfig: { content: 'Ctrl+P' } }
                                ]
                            }
                        ],
                        [
                            { code: 'EXPORT_ROW', name: '导出当前行.csv', prefixConfig: { icon: 'vxe-icon-download' } },
                            { code: 'EXPORT_ALL', name: '导出全部数据.csv', prefixConfig: { icon: 'vxe-icon-download' } }
                        ]
                    ]
                },
                footer: {
                    options: [
                        [
                            { code: 'EXPORT_ALL', name: '导出全部数据.csv', prefixConfig: { icon: 'vxe-icon-download' } }
                        ]
                    ]
                }
            },
            footerData: [
                { checkbox: '合计', age: 135 }
            ]
        };
        return {
            gridOptions
        };
    },
    methods: {
      handleMenuClick({ menu, type, row, column }) {
        if (!menu || !menu.code) return;
        if (menu.code === 'INSERT_COL_LEFT')  return this.insertColumnBy(column, 'left');
        if (menu.code === 'INSERT_COL_RIGHT') return this.insertColumnBy(column, 'right');
        if (menu.code === 'DELETE_THIS_COLUMN') return this.deleteCurrentColumn(column);
      },
          insertColumnBy(column, side = 'right') {
      const rawIndex = this.findRawColumnIndex(column);
      if (rawIndex < 0) return;

      // 不允许对特殊列（checkbox/seq）左侧插入（可按需放开）
      const targetCfg = this.gridOptions.columns[rawIndex];
      if (targetCfg.type === 'checkbox' || targetCfg.type === 'seq') {
        // 放在其后
        side = 'right';
      }

      const insertIndex = side === 'left' ? rawIndex : rawIndex + 1;

      const newField = this.generateNewField();
      const newCol = {
        field: newField,
        title: `新列 ${newField}`,
        minWidth: 120,
        editRender: { name: 'input' },
        sortable: true
      };

      // 1) 插入列定义
      const cols = [...this.gridOptions.columns];
      cols.splice(insertIndex, 0, newCol);
      this.gridOptions.columns = cols;

      // 2) 给每一行补字段
      this.gridOptions.data = this.gridOptions.data.map(r => ({ ...r, [newField]: '' }));

      // 3) 刷新列（更稳妥）
      this.$nextTick(() => {
        this.$refs.xGrid?.reloadColumn(this.gridOptions.columns);
      });
    },
        deleteCurrentColumn(column) {
      const rawIndex = this.findRawColumnIndex(column);
      if (rawIndex < 0) return;

      const cfg = this.gridOptions.columns[rawIndex];
      // 保护：不删特殊列
      if (cfg.type === 'checkbox' || cfg.type === 'seq') return;

      const field = cfg.field;

      // 1) 移除列定义
      const cols = [...this.gridOptions.columns];
      cols.splice(rawIndex, 1);
      this.gridOptions.columns = cols;

      // 2) 可选：移除数据字段（或保留）
      this.gridOptions.data = this.gridOptions.data.map(r => {
        const { [field]: _, ...rest } = r;
        return rest;
      });

      this.$nextTick(() => {
        this.$refs.xGrid?.reloadColumn(this.gridOptions.columns);
      });
    },
        findRawColumnIndex(column) {
      // column.property 是字段名；column.type 是类型列标识
      const prop = column && column.property;
      const ctype = column && column.type;
      return this.gridOptions.columns.findIndex(cfg =>
        prop ? cfg.field === prop : (ctype ? cfg.type === ctype : false)
      );
    },
    generateNewField() {
      // 生成不重复的字段名 col_1, col_2, ...
      let i = 1;
      const exists = new Set(this.gridOptions.columns.map(c => c.field).filter(Boolean));
      while (exists.has(`col_${i}`)) i++;
      return `col_${i}`;
    }
    }
};
</script>
